<template>
  <div class="container-fluid px-0 mx-0" style="background:black">
    <div>
      <a class="dropdown" v-for="(item, itemidx) of roomitems" :key=itemidx>
        <a :class=btnclass(1) href="#" role="button" id="dropdownMenuItem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{item.name}}</a>
        <div class="dropdown-menu thing-act-item" aria-labelledby="dropdownMenuItem">
          <button class="dropdown-item thing-act-button" type="button" v-for="(act, actidx) of roomitemacts" :key=actidx :value="[item.id, act.act]" @click="onitemact($event)">{{act.text}}</button>
        </div>
      </a>
    </div>
    <div>
      <a class="dropdown" v-for="(player, playeridx) of roomplayers" :key=playeridx>
        <a :class=btnclass(2) href="#" role="button" id="dropdownMenuItem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{player.name}}</a>
        <div class="dropdown-menu thing-act-item" aria-labelledby="dropdownMenuItem">
          <button class="dropdown-item thing-act-button" type="button" v-for="(act, actidx) of roomplayeracts" :key=actidx :value="[player.id, act.act]" @click="onplayeract($event)">{{act.text}}</button>
        </div>
      </a>
    </div>
    <div>
      <a class="dropdown" v-for="(equip, equipidx) of roomequips" :key=equipidx>
        <a :class=btnclass(3) href="#" role="button" id="dropdownMenuItem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{equip.name}}</a>
        <div class="dropdown-menu thing-act-item" aria-labelledby="dropdownMenuItem">
          <button class="dropdown-item thing-act-button" type="button" v-for="(act, actidx) of roomequipacts" :key=actidx :value="[equip.id, act.act]" @click="onequipact($event)">{{act.text}}</button>
        </div>
      </a>
    </div>
    <div>
      <a class="dropdown" v-for="(npc, npcidx) of roomnpcs" :key=npcidx>
        <a :class=btnclass(4) href="#" role="button" id="dropdownMenuItem" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{npc.name}}</a>
        <div class="dropdown-menu thing-act-item" aria-labelledby="dropdownMenuItem">
          <button class="dropdown-item thing-act-button" type="button" v-for="(act, actidx) of roomnpcacts" :key=actidx :value="[npc.id, act.act]" @click="onnpcact($event)">{{act.text}}</button>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
/* eslint-disable comma-dangle */
export default {
  data: function () {
    return {
      vdata: this.gdata.data,
      dictitem: {},
      dictequip: {},
      dictnpc: {},
      dictplayer: {},
    }
  },
  components: {
  },
  mounted: function () {
  },
  computed: {
    roomitems: function () {
      var result = {}
      for (var id in this.dictitem) {
        var item = this.dictitem[id]
        var count = item.Count
        var node = { id: id, count: count }
        var cfg = this.conf.ConfigItem[id]
        node.name = count + cfg.Unit + cfg.Name
        result[id] = node
      }
      return result
    },
    roomitemacts: function () {
      var result = []
      result.push({ act: 'look', text: '查看' })
      result.push({ act: 'get', text: '拾取' })
      return result
    },
    roomequips: function () {
      var result = {}
      for (var id in this.dictequip) {
        var equip = this.dictequip[id]
        var node = { id: id, name: equip.Name }
        result[id] = node
      }
      return result
    },
    roomequipacts: function () {
      var result = []
      result.push({ act: 'look', text: '查看' })
      result.push({ act: 'get', text: '拾取' })
      return result
    },
    roomnpcs: function () {
      var result = {}
      for (var id in this.dictnpc) {
        var npc = this.dictnpc[id]
        var node = { id: id, name: npc.Name }
        result[id] = node
      }
      return result
    },
    roomnpcacts: function () {
      var result = []
      result.push({ act: 'look', text: '查看' })
      result.push({ act: 'kill', text: '攻击' })
      return result
    },
    roomplayers: function () {
      var result = {}
      for (var id in this.dictplayer) {
        var player = this.dictplayer[id]
        var node = { id: id, name: player.Name }
        result[id] = node
      }
      return result
    },
    roomplayeracts: function () {
      var result = []
      result.push({ act: 'look', text: '查看' })
      // result.push({ act: 'kill', text: '攻击' })
      return result
    },
  },
  methods: {
    btnclass: function (type) {
      if (type === 1) {
        return (this.vdata.onpc ? 'btnthing' : 'btnthing-ph') + ' btn btn-outline-success btn-sm p-0 dropdown-toggle'
      } else if (type === 2) {
        return (this.vdata.onpc ? 'btnthing' : 'btnthing-ph') + ' btn btn-outline-warning btn-sm p-0 dropdown-toggle'
      } else if (type === 3) {
        return (this.vdata.onpc ? 'btnthing' : 'btnthing-ph') + ' btn btn-outline-info btn-sm p-0 dropdown-toggle'
      } else if (type === 4) {
        return (this.vdata.onpc ? 'btnthing' : 'btnthing-ph') + ' btn btn-outline-primary btn-sm p-0 dropdown-toggle'
      } else {
        return (this.vdata.onpc ? 'btnthing' : 'btnthing-ph') + ' btn btn-outline-warning btn-sm p-0 dropdown-toggle'
      }
    },
    onitemact: function (event) {
      var listval = event.srcElement.value.split(',')
      var id = listval[0]
      var act = listval[1]
      switch (act) {
        case 'look': {
          let cfg = this.conf.ConfigItem[id]
          let desc = cfg.Desc
          this.jxwdtextmud(desc)
          break
        }
        case 'get': {
          let reqinfo = this.wsreq('C2G_ITEM_GET')
          reqinfo.ConfigId = id
          this.wssend(reqinfo)
          break
        }
        default:
          break
      }
    },
    onequipact: function (event) {
      var listval = event.srcElement.value.split(',')
      var id = listval[0]
      var act = listval[1]
      switch (act) {
        case 'look': {
          let reqinfo = this.wsreq('C2G_EQUIP_INFOROOM')
          reqinfo.Uid = Number(id)
          this.wssend(reqinfo)
          break
        }
        case 'get': {
          let reqinfo = this.wsreq('C2G_EQUIP_GET')
          reqinfo.Uid = Number(id)
          this.wssend(reqinfo)
          break
        }
        default:
          break
      }
    },
    onnpcact: function (event) {
      var listval = event.srcElement.value.split(',')
      var id = listval[0]
      var act = listval[1]
      switch (act) {
        case 'look': {
          let reqinfo = this.wsreq('C2G_NPC_LOOK')
          reqinfo.Uid = Number(id)
          this.wssend(reqinfo)
          break
        }
        case 'kill': {
          var reqinfo = this.wsreq('C2G_NPC_KILL')
          reqinfo.Uid = Number(id)
          this.wssend(reqinfo)
          break
        }
        default:
          break
      }
    },
    onplayeract: function (event) {
      var listval = event.srcElement.value.split(',')
      var id = listval[0]
      var act = listval[1]
      switch (act) {
        case 'look': {
          var reqinfo = this.wsreq('C2G_CHAR_LOOK')
          reqinfo.Uid = id
          this.wssend(reqinfo)
          break
        }
        default:
          break
      }
    },
    G2C: function (pid, rsp, success, result) {
      switch (pid) {
        case 'G2C_ROOM_INFO':
        case 'G2C_ROOM_ROOMTHING': {
          var roominfo = rsp.RoomInfo
          this.dictitem = roominfo.DictItem
          this.dictequip = roominfo.DictEquip
          this.dictnpc = roominfo.DictNpc
          this.dictplayer = roominfo.DictPlayer
          break
        }
        default:
          // 这里是没有找到对应的值处理
          break
      }
    }
  }
}
</script>

<style scoped>
.btnthing {
  white-space: normal;
  margin: 1px;
  font-size: 20px;
}
.btnthing-ph {
  white-space: normal;
  margin: 1px;
  font-size: 15px;
}
.thing-act-item {
  background: Orange;
}
</style>
